<template>
    <div style="width: 100%;">
        <el-header>
            <el-row :span="24">
                <el-col :span="1">
                    <!-- 刷新 -->
                    <el-tooltip class="item" effect="dark" content="刷新" placement="top-start">
                        <i class="fa fa-refresh refresh" @click="$router.go(0)"></i>
                    </el-tooltip>
                    <!-- 刷新 end-->
                </el-col>
                <el-col :span="20">
                    <!-- 面包屑 -->
                    <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height: 60px;">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index">
                            {{ item.name }}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                    <!-- 面包屑 end-->
                </el-col>
                <el-col :span="1">
                    <!-- 后台信件 -->
                    <Letter />
                    <!-- 后台信件 end-->
                </el-col>
                <el-col :span="2">
                    <!-- 登陆用户信息 -->
                    <LogInUserInfo @logout="logout" />
                    <!-- 登陆用户信息 end-->
                </el-col>
            </el-row>
            <!-- websocket消息通知 -->
            <Notification ref="Notification" />
            <!-- websocket消息通知 end-->

        </el-header>
    </div>
</template>

<script>
import Notification from "../common/Notification";
import LogInUserInfo from "./LogInUserInfo.vue";
import Letter from "./Letter.vue";

export default {
    components: {
        Notification,
        LogInUserInfo,
        Letter
    },
    methods: {
        logout() {
            //关闭websocket连接
            this.$refs['Notification'].closeWebSocket();
        }
    }
}
</script>

<style lang="scss" scoped>
.el-header {
    background: #FFFFFF;
    line-height: 60px;
    width: 100%;

    .refresh:hover {
        cursor: pointer
    }
}
</style>